<template>
	<view class="goods_item">
		<image :src='getMedieUrl(item.image)' class="goods_item_image"></image>
		<view class="goods_item_text_content">
			<view class="goods_item_name"><text class="goods_item_name_text">{{item.goodsName}}</text></view>
			<view><text class="goods_item_center">{{item.goodsDesc}}</text></view>
			<view class="goods_item_name"><text class="goods_item_name_price">￥{{item.price}}</text></view>
			<view class="box_check">
				<view class="box_set_num">
					<view class="box_text_add_lose_num" @click="clickLose"><text class="box_text_lose">-</text></view>
					<view class="box_text_add_lose_num"><text class="box_text_num">{{goodsNumber}}</text></view>
					<view class="box_text_add_lose_num" @click="clickAdd"><text class="box_text_add">+</text></view>
				</view>
				<view class="box_switch">
					<switch :checked="item.wishStatus==1" color="#4CD964" style="transform:scale(0.7)" />
					<view class="check_tans_view" @click="clickChangeState"></view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: "goods-list",
		props: {
			item: {
				type: Object,
				default () {
					return {
						goodsName: '',
						price: "",
						image: "",
						wishStatus: 0,
            wishNumber: 1,
						goodsDesc: "",
					}
				}
			}
		},
		mounted() {
			console.log("===z this.item.wishNumber=" + this.item.wishNumber);
			if(this.item.wishNumber) {
				this.goodsNumber = this.item.wishNumber;
			} else {
				this.goodsNumber = 1;
			}
			
		},
		data() {
			return {
				goodsNumber: this.item.wishNumber,
			};
		},
		methods: {
			clickChangeState() {
				console.log("===z switchChange执行了");
				this.$emit("clickChangeStateParent", {})
			},
			//减法
			clickLose() {
				this.$emit("clickLoseParent", {})
				//点击之后重新赋值 才会刷新
				if(this.item.wishNumber > 0) {
					this.goodsNumber = this.item.wishNumber;
				} else {
					this.goodsNumber = 1;
				}
			},
			//加法
			clickAdd() {
				//触发子视图中的该事件方法
				//定义一个事件名，在子页面中触发该方法名
				this.$emit("clickAddParent", {})
				//点击之后重新赋值 才会刷新
				if(this.item.wishNumber > 0) {
					this.goodsNumber = this.item.wishNumber;
				} else {
					this.goodsNumber = 1;
				}
			},
			getMedieUrl(url) {
				if (!url) {
					return require('@/static/images/lodding-err.png');
				} else {
					return 'https://' + 'live-mall-1319905095.cos.ap-singapore.myqcloud.com' + '/' + url; //OSS 缩略图规则
				}
			},

		},
	}
</script>

<style lang="scss" scoped>
	.goods_item {
		display: flex;
		flex-direction: row;
		width: 670rpx;
		margin-top: 20rpx;
		border: 2rpx solid #E1E8E8;
		align-items: center;
		padding: 20rpx;
		// box-sizing: border-box; //盒子不会被撑开
		border-radius: 26rpx;

		//左边图片
		.goods_item_image {
			width: 198rpx;
			height: 242rpx;
			border-radius: 20rpx;
      background-color: #eeeeee;
		}

		//右边内容
		.goods_item_text_content {
			display: flex;
			flex-direction: column;
			margin-left: 32rpx;
			margin-top: 2rpx;
			width: 398rpx;
			// box-sizing: border-box; //盒子不会被撑开

			//设置数量和选框
			.box_check {
				width: 418rpx;
				display: flex;
				flex-direction: row;
				margin-top: 10rpx;
				justify-content: space-between;

				.box_switch {
					position: relative;
					align-items: flex-end;

					.check_tans_view {
						position: absolute;
						width: 100rpx;
						height: 60rpx;
						background-color: rgba(255, 0, 0, 0);
						opacity: 0.1;//设置0.0全透明iOS具有事件穿透 且不能屏蔽
					}
				}

				//设置数量
				.box_set_num {
					display: flex;
					flex-direction: row;
					width: 176rpx;
					height: 62rpx;
					border-radius: 30rpx;
					background-color: #EEEEEE;
					justify-content: center;
					align-items: center;

					.box_text_add_lose_num {


						.box_text_lose {
							padding-right: 10rpx;
						}

						.box_text_num {
              font-size: 28rpx;
              color: #000000;
							padding-right: 10rpx;
						}

						.box_text_add {
							// padding-left: 10rpx;
						}

					}

				}
			}

			.goods_item_center {
				font-size: 28rpx;
				color: #1B1D29;
				padding-top: 10rpx;
				opacity: 0.7; //设置透明度
				/* 设置两行省略 */
				text-overflow: ellipsis;
				overflow: hidden; //溢出内容隐藏
				// display: -webkit-box; //特别显示模式
				// -webkit-line-clamp: 2; //行数
				// line-clamp: 2;
				// -webkit-box-orient: vertical; //盒子中内容竖直排列	
				lines: 2;
				/* 设置两行省略 */
			}

			.goods_item_name {
				font-size: 28rpx;
				color: #1B1D29;

				.goods_item_name_text {
          font-size: 28rpx;
          color: #1B1D29;

					/* 设置两行省略 */
					text-overflow: ellipsis;
					overflow: hidden; //溢出内容隐藏
					// display: -webkit-box; //特别显示模式
					// -webkit-line-clamp: 1; //行数
					// line-clamp: 1;
					// -webkit-box-orient: vertical; //盒子中内容竖直排列	
					lines: 1;
					/* 设置两行省略 */

				}

				.goods_item_name_price {
          font-size: 28rpx;
          color: #1B1D29;
					font-weight: bold;
					padding-top: 10rpx;
				}

			}

		}


	}
</style>